<template>
  <div>
    <div class="centered-component" v-if="this.auditData.length===0">
      <el-empty description="空空如也">
        <el-link type="primary" @click="goto()">点我去领养萌宠吧</el-link>
      </el-empty>
    </div>
    <div>
      <el-row>
        <el-col style="margin-top: 20px" v-for="(audit, index) in auditData" :key="index">
          <el-card shadow="hover">

            <div>
              <el-descriptions :label-width="100" :column="3" title="我的领养申请" border>
                <template slot="extra">

                  <el-button type="danger" size="small" @click="()=>del(audit.id)" v-if="audit.progress==='1'||audit.progress==='2'">取消申请</el-button>
                  <el-button type="warning" size="small" @click="adopted(audit.petId)" v-if="audit.applyStatus==='同意'">
                    确认领养
                  </el-button>
                  <el-button type="primary" size="small" @click="()=>edit(audit)" v-if="audit.applyStatus==='待审核'">修改
                  </el-button>
                </template>
                <el-descriptions-item label="宠物名字">
                  <template slot="label">
                    <i class="el-icon-user">宠物名字</i>
                  </template>
                  {{ audit.name }}&nbsp&nbsp<i class="el-icon-view"></i>
                  <el-link type="success" @click="look(audit.petId)">查看详情</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="申请时间">
                  <template slot="label">
                    <i class="el-icon-watch">申请时间</i>
                  </template>
                  {{ audit.applyTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核状态">
                  <template slot="label">
                    <i class="el-icon-turn-off">审核状态</i>
                  </template>
                  {{ audit.applyStatus }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone">联系电话</i>
                  </template>
                  {{ audit.contact }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-watch">约定时间</i>
                  </template>
                  {{ audit.setTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核时间">
                  <template slot="label">
                    <i class="el-icon-watch">审核时间</i>
                  </template>
                  {{ audit.okTime }}
                </el-descriptions-item>
                <el-descriptions-item label="申请理由">
                  <template slot="label">
                    <i class="el-icon-postcard">申请理由</i>
                  </template>
                  {{ audit.applyReason }}
                </el-descriptions-item>
                <el-descriptions-item label="约定地点">
                  <template slot="label">
                    <i class="el-icon-office-building">约定地点</i>
                  </template>
                  {{ audit.spot }}
                </el-descriptions-item>
                <el-descriptions-item label="审核意见">
                  <template slot="label">
                    <i class="el-icon-chat-dot-square">审核意见</i>
                  </template>
                  {{ audit.reply }}
                </el-descriptions-item>
              </el-descriptions>
            </div>

              <div style="margin-top: 50px">
                事件进度
              </div>

                <el-steps :space="500" :active=audit.progress finish-status="success" style="margin-top: 50px">
                  <el-step title="提交申请"></el-step>
                  <el-step title="审核"></el-step>
                  <el-step title="领养宠物"></el-step>
                </el-steps>

          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-dialog title="宠物信息" :visible.sync="dialogTableVisible">
        <el-row>
          <el-col model="Pet">
            <el-card shadow="hover">
              <div style="display: flex">
                <div>
                  <div class="block">
                    <el-image :src="'http://localhost:8080/yyj/files/'+Pet.image"
                              :preview-src-list="['http://localhost:8080/yyj/files/'+Pet.image]"
                              style="height: 150px;width: 120px"></el-image>
                  </div>
                  <div class="bottom clearfix">
                  <span style="font-size: 5px">
                    {{ Pet.currentTime }}
                  </span>
                  </div>
                </div>
                <div>
                  <el-descriptions style="margin-left :20px" title="萌宠信息">
                    <el-descriptions-item label="姓名">{{ Pet.name }}</el-descriptions-item>
                    <el-descriptions-item label="品种">{{ Pet.variety }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ Pet.age }}</el-descriptions-item>
                    <el-descriptions-item label="地址">{{ Pet.address }}</el-descriptions-item>
                    <el-descriptions-item label="介绍">{{ Pet.description }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ Pet.chat }}</el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
    <!--删除确认对话框    -->
    <div>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%">
        <span>你确定要取消申请吗</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="warning" @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary">确 定</el-button>
  </span>
      </el-dialog>
    </div>

    <!-- 领养表单模态框 -->
    <div>
      <el-dialog :visible="showAdoptionModal" title="领养信息" @close="showAdoptionModal = false" width="30%">
        <el-form ref="adoptionForm" :model="form" label-width="80px">
          <el-form-item label="联系方式">
            <el-input v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item label="约定时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.setTime"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="约定地点">
            <el-radio v-model="radio" label="1">上门领养</el-radio>
            <el-radio v-model="radio" label="2">自定义地点</el-radio>
          </el-form-item>
          <el-form-item label="具体地点" v-if="showSpotInput">
            <el-input v-model="form.spot"></el-input>
          </el-form-item>
          <el-form-item label="申请理由">
            <el-input type="textarea" v-model="form.applyReason"></el-input>
          </el-form-item>
        </el-form>
        <!-- 模态框的底部按钮 -->
        <span slot="footer" class="dialog-footer">
              <el-button type="warning" @click="showAdoptionModal = false">取消</el-button>
              <el-button type="primary" @click="submitUpdate">提交</el-button>
            </span>
      </el-dialog>
    </div>
    <!-- 确认领养成功的对话框  -->
    <el-dialog
        title="提示"
        :visible.sync="adoptDialog"
        width="30%">
      <span>请确认已经领养到宠物</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="adoptDialog = false">取 消</el-button>
    <el-button type="primary" @click="submit()">确 定</el-button>
  </span>
    </el-dialog>

    <div>

    </div>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "MyAuditView",
  data() {
    return {
      radio: '1',
      auditId: '',
      Pet: {},
      dialogTableVisible: false,
      dialogVisible: false,
      showAdoptionModal: false,
      showSpotInput: false,
      adoptDialog: false,
      auditData: [],
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {},
      form: {},
      confirmFrom: {},
      currentStep: '1'
    };
  },
  watch: {
    radio(newValue) {
      this.showSpotInput = newValue === '2'; // 当选择自定义地点时显示输入框，否则隐藏
    },
  },
  created() {
    this.getMyAudit(this.user.userId);
  },
  methods: {
    //确认领养的方法
    adopted(petId) {
      this.adoptDialog = true;
      this.confirmFrom.petId = petId;
      this.confirmFrom.newOwner = this.user.userId;

    },
    submit() {
      //确认领养到宠物
      request.post("/audit/confirm", this.confirmFrom).then(res => {
        if (res.code === '0') {
          this.$message.success("已完成领养");
          this.adoptDialog = false;
          this.getMyAudit(this.user.userId);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getMyAudit(applyUserId) {
      request.get("/audit/" + applyUserId)
          .then(res => {
            if (res.code === '0') {
              this.auditData = res.data;
            } else {
              this.$message.error(res.msg);
            }
          });
    },
    look(petId) {
      this.dialogTableVisible = true;
      //根据宠物id查询
      request.get("/audits/" + petId).then(res => {
        if (res.code === '0') {
          this.Pet = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //取消申请
    del(id) {
      this.dialogVisible = true;
      this.auditId = id;
    },
    submitDel() {
      request.delete("/delete/" + this.auditId).then(res => {
        if (res.code === '0') {
          this.getMyAudit(this.user.userId);
          this.$message.success("已取消申请");
          this.dialogVisible = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //编辑,显示出对话框
    edit(audit) {
      this.form = audit;
      //打开一个对话框
      this.showAdoptionModal = true;
      this.getMyAudit(this.user.userId);
    },
    //提交修改的信息
    submitUpdate() {
      request.post("audit/update", this.form).then(res => {
        if (res.code === '0') {
          this.$message.success("修改成功");
          this.showAdoptionModal = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    goto() {
      this.$router.push("/homepage")
    }


  },

}
</script>

<style scoped>
.centered-component {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}

</style>